<template>
	<view class="container">
		<view class="search">
			<u-search placeholder="请输入搜索关键词" v-model="keyword" @search="searchClick" @custom="searchClick"></u-search>
		</view>
		<view class="content">
			<scroll-view scroll-y="true" class="left_content">
				<view style="background: #fff;">
					<view class="item_box"
						:class="[{'type_active':current == index},{'item_active_top':index == current - 1},{'item_active_bottom':index == current + 1}]"
						v-for="(item,index) in typeList" @click="typeClick(index)" :key="index">
						{{item.category_name}}
					</view>
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="right_content">
				<view>
					<view class="title">{{typeList[current].category_name}}</view>
					<view class="child_list_box">
						<view class="child_list" v-for="(item,index) in childList" :key="index"
							@click="$gourl('/pages/index/shopDetails?id='+shopData.item_id)">
							<view class="img_box">
								<image :src="item.pics[0]" mode=""></image>
							</view>
							<view class="text_box">
								<view class="type_name">{{item.itemName}}</view>
								<!-- <view class="shop_sku">商品重量 5kg</view> -->
								<view class="shop_price">
									<text class="red">￥</text>
									<text class="big red">{{Number(item.price/100).toFixed(2)}}</text>
									<text class="line">￥{{Number(item.market_price/100).toFixed(2)}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				typeList: [{
					category_name: '全部',
					category_id: '0'
				}],
				childList: [],
				page: 1,
				total: 1,
				count: 1,
			}
		},
		onLoad() {
			this.getCategory()
			this.getGoods()
		},
		methods: {
			typeClick(index) {
				this.current = index
				this.getGoods()
				this.page = 1
			},
			async getCategory() {
				await this.$allApi.getCategoryList().then(res => {
					this.typeList = this.typeList.concat(res.data)
				})
			},
			async getGoods() {
				uni.showLoading({
					title: '加载中'
				})
				await this.$allApi.getGoodsList({
					page: this.page,
					pageSize: 20,
					main_category: this.typeList[this.current].category_id
				}).then(res => {
					this.total = res.data.total_count
					this.count = Math.ceil(Number(this.total) / 20)
					if (this.page == 1) {
						this.childList = res.data.list
					} else {
						this.childList = this.childList.concat(res.data.list)
						this.status = 'loadmore'
					}
					uni.hideLoading()
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.shop_price {
		display: flex;
		position: relative;
		flex-direction: row;
		justify-content: flex-start;
		align-items: baseline;
		line-height: 32rpx;
		margin: 8rpx 0 0 0;
		// font-weight: bold;
		color: #bbb;
		font-size: 24rpx;

		.red {
			color: #fa4126;
		}

		.big {
			font-size: 28rpx;
		}

		.line {
			text-decoration: line-through;
		}
	}

	.search {
		padding: 30rpx;
		background: #fff;
	}

	.top_box {
		background: #d33124;
		padding: 30rpx;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 99;
	}

	.right_content {
		height: 100%;
		flex: 1;
		background: #fff;
		padding: 0 30rpx;

		.title {
			height: 92rpx;
			line-height: 92rpx;
		}

		.child_list_box {
			.child_list {
				display: flex;
				justify-content: flex-start;
				padding: 30rpx 0;
				border-bottom: 1px solid #eee;

				.text_box {
					padding-top: 20rpx;
					padding-left: 20rpx;

					.type_name {
						width: 206rpx;
						font-size: 28rpx;
						font-weight: bold;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
						word-break: break-word;
					}

					.shop_sku {
						font-size: 20rpx;
						color: #999;
						line-height: 2;
					}

					.price {
						color: red;
						font-size: 20rpx;
						margin-top: 20rpx;

						text {
							font-size: 28rpx;
							font-weight: bold;
						}
					}
				}

				.img_box {
					text-align: center;
					border: 1px solid #eee;
					width: 144rpx;
					height: 144rpx;

					image {
						width: 144rpx;
						height: 144rpx;
					}
				}
			}
		}
	}

	.left_content {
		height: 100%;
		width: 180rpx;

		.item_box {
			display: flex;
			justify-content: center;
			align-items: center;
			color: #222427;
			height: 92rpx;
			font-size: 26rpx;
			background: #f5f5f5;
		}

		.item_active_top {
			border-radius: 0 0 10rpx 0;
		}

		.item_active_bottom {
			border-radius: 0 10rpx 0 0;
		}

		.type_active {
			background: white;
			color: #d33124;
			border-left: 3px solid #d33124;
		}
	}

	.content {
		height: calc(100vh - 134rpx - 94px);
		display: flex;
		align-items: center;
		justify-content: flex-start;
		// padding-top: 30rpx;
	}


	// #ifdef H5
	.container {
		min-height: calc(100vh - 94px) !important;
	}

	// #endif
	.container {
		min-height: 100vh;
		background: #f5f5f5;
	}
</style>
